<template>
  <div class="bg">
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        @click="operation(3)"
      >保存</el-button>
      <el-button
        type="success"
        size="small"
        @click="operation(3)"
      >打印</el-button>
    </div>
    <div class="card">
      <el-card>
        <h3>房屋白蚁灭治施工单</h3>
        <div>
          <table cellspacing="0" cellpadding="0">
            <!-- 12行8列 -->
            <tr>
              <td class="bgmgry">单位</td>
              <td colspan="6">余杭白蚁灭治办</td>
              <td class="bgmgry">联系人</td>
              <td />
            </tr>
            <tr>
              <td class="bgmgry">危害部位</td>
              <td colspan="6">{{ detailInfo.HarmfulPart }}</td>
              <td class="bgmgry" />
              <td />
            </tr>
            <tr>
              <td class="bgmgry">地址</td>
              <td colspan="2" />
              <td class="bgmgry">费用</td>
              <td />
              <td class="bgmgry">白蚁种类</td>
              <td />
              <td class="bgmgry">电话</td>
              <td>{{ detailInfo.ContactNumber }}</td>
            </tr>
            <tr>
              <td class="bgmgry">面积</td>
              <td colspan="2" />
              <td class="bgmgry">药量</td>
              <td />
              <td class="bgmgry">使用浓度</td>
              <td />
              <td class="bgmgry">建筑用途</td>
              <td />
            </tr>
            <tr>
              <td class="bgmgry">药名</td>
              <td colspan="6" />
              <td class="bgmgry">完成工作量</td>
              <td />
            </tr>
            <tr rowspan="4">
              <td class="bgmgry" style="height:10rem">受理信息</td>
              <td colspan="8" />
            </tr>

            <tr rowspan="4">
              <td class="bgmgry" style="height:10rem">现场凭证</td>
              <td colspan="8" />
            </tr>
            <tr>
              <td class="bgmgry">施工负责人</td>
              <td colspan="6" />
              <td class="bgmgry">施工人员</td>
              <td />
            </tr>
            <tr rowspan="4">
              <td class="bgmgry" style="height:10rem">单位意见</td>
              <td colspan="6" />

              <td class="bgmgry" />
              <td />
            </tr>

            <tr>
              <td class="bgmgry">开单日期</td>
              <td colspan="6">{{ detailInfo.ApplicationTime }}</td>
              <td class="bgmgry">编号</td>
              <td />
            </tr>
            <tr>
              <td class="bgmgry">开单人</td>
              <td colspan="6" />
              <td class="bgmgry">电话</td>
              <td>0571-8876650</td>
            </tr>
            <tr>
              <td class="bgmgry">地址</td>
              <td colspan="8">五常街道浙财科创中心C座505</td>
            </tr>
          </table>

          <div class="btn">
            <el-button
              type="primary"
              size="small"
              @click="operation(3)"
            >保存</el-button>
            <el-button
              type="success"
              size="small"
              @click="operation(3)"
            >打印</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailInfo: {}
    }
  },

  mounted() {
    console.log('this.$route.params ->', this.$route.params)
    this.detailInfo = this.$route.params
  },

  methods: {
    //   操作
    operation(e) {
      this.$emit('operation', e)
    }
  }
}
</script>

<style lang="scss" scoped>
table {
  // width: 1000px;
  margin-bottom: 50px;
}
table tr td {
  width: 120px;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px 10px;
}
.card {
  max-width: 1000px;
  // width: 100px;
  margin: 2rem 3rem;
  h3 {
    text-align: center;
  }
}
.bg {
  background-color: #f4f5f6;
  padding-top: 10px;
}
.btn {
  // width: 100vh;
  background-color: #fff;
  padding: 10px 30px;
  display: flex;
  justify-content: flex-end;
}
.bgmgry {
  background-color: #f2f2f2;
}
</style>
